<template>
  <ElSplitter>
    <ElSplitterPanel>
      <ElInput v-model="value" type="textarea" class="full" />
    </ElSplitterPanel>
    <ElSplitterPanel>
      <JsonEditor v-model="data" />
    </ElSplitterPanel>
  </ElSplitter>
</template>
<script setup lang="ts">
  import { ElInput, ElSplitter, ElSplitterPanel } from 'element-plus';
  import JsonEditor from './JsonEditor.vue';
  import { ref, watch } from 'vue';

  const props = defineProps<{modelValue?: Record<string, any>}>()
  const emits = defineEmits(['update:modelValue'])

  const data = ref<Record<string, any>>(props.modelValue || {})
  const value = ref<string>(props.modelValue ? JSON.stringify(props.modelValue) : void 0)

  watch(() => props.modelValue, (val) => value.value = val ? JSON.stringify(val) : void 0)
  watch(() => value.value, (val) => {
    try {
      data.value = val ?JSON.parse(val) : {}
    } catch(e) {
      console.log('---', e)
    }
  })
  // watch(() => data.value, () => console.log('data change', data.value), { deep: true })
  // watch(() => data.value, () => emits('update:modelValue', ))
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 100%;
  }
</style>